﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars2d.cn " />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/muyao1987/cdn/marsgis.cn/favicon/favicon.ico" />

    <meta name="keywords" content="火星科技,leaflet,mars2d,GIS,marsgis,二维,地图,地球,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 leaflet leaflet开发 leaflet框架 二维 地图 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 二维地图 全景漫游 地理信息系统 云GIS 二维GIS GIS平台 WebGIS"
    />

    <title>Mars2D地图 |二维地图| 火星科技|合肥火星科技|合肥火星科技有限公</title>

    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,font-awesome,bootstrap,layer,localforage,haoutil,mars2d,mars2d-widget"
    ></script>
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="mars2dContainer" class="mars2d-container"></div>

    <script type="text/javascript">
      $(document).ready(function () {
        initMap();
      });

      //地图加载
      function initMap() {
        let map = new mars2d.Map("mars2dContainer", {
          crs: mars2d.CRS.BAIDU,
          zoom: 12,
          center: [31.834912, 117.220102],
          control: {
            scale: true,
            locationBar: {
              crs: "CGCS2000_GK_Zone_3",
              template: "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>横{crsx}  纵{crsy}</div> <div>层级:{level}</div>",
            },
            layers: { position: "topleft" },
            zoom: { position: "bottomright" },
            toolBar: { position: "bottomright" },
          },
          basemaps: [
            {
              pid: 10,
              name: "百度地图",
              type: "baidu",
              layer: "vec",
              icon: "baidumap.png",
              crs: "baidu",
              show: true,
            },
            {
              pid: 10,
              name: "百度卫星",
              type: "baidu",
              layer: "img",
              icon: "baiduimage.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "电子大字体",
              type: "baidu",
              layer: "vec",
              bigfont: true,
              icon: "baidumap.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "卫星大字体",
              type: "baidu",
              layer: "img",
              bigfont: true,
              icon: "baiduimage.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "草绿地图",
              type: "baidu",
              layer: "custom",
              style: "grassgreen",
              icon: "bd-c-grassgreen.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "深蓝地图",
              type: "baidu",
              layer: "custom",
              style: "midnight",
              icon: "bd-c-midnight.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "浅蓝地图",
              type: "baidu",
              layer: "custom",
              style: "bluish",
              icon: "bd-c-bluish.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "淡蓝地图",
              type: "baidu",
              layer: "custom",
              style: "light",
              icon: "bd-c-light.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "黑色地图",
              type: "baidu",
              layer: "custom",
              style: "dark",
              icon: "bd-c-dark.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "灰色地图",
              type: "baidu",
              layer: "custom",
              style: "grayscale",
              icon: "bd-c-grayscale.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "红色地图",
              type: "baidu",
              layer: "custom",
              style: "redalert",
              icon: "bd-c-redalert.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "粉红地图",
              type: "baidu",
              layer: "custom",
              style: "pink",
              icon: "bd-c-pink.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "墨绿地图",
              type: "baidu",
              layer: "custom",
              style: "darkgreen",
              icon: "bd-c-darkgreen.png",
              crs: "baidu",
            },

            {
              pid: 10,
              name: "简约地图",
              type: "baidu",
              layer: "custom",
              style: "hardedge",
              icon: "bd-c-hardedge.png",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "谷歌地图",
              type: "baidu",
              layer: "custom",
              style: "googlelite",
              crs: "baidu",
            },
            {
              pid: 10,
              name: "离线百度瓦片",
              type: "tile",
              url: "http://data.mars2d.cn/tile/baiduVec/{z}/{x}/{y}.jpg",
              tms: true,
              crs: "baidu",
              icon: "bd-c-googlelite.png",
            },
          ],
        });

        //测试坐标信息
        activatePOIQuery(map);
      }

      //附加：激活POI查询widget，用于在底图上叠加显示数据，【框架已自动纠偏处理】
      function activatePOIQuery(map) {
        mars2d.widget.activate({
          map: map,
          name: "POI查询",
          uri: "widgets/queryGaodePOI/widget.js",
          pointTransFun: mars2d.PointTrans.wgs2bd,
          success: function (item) {
            item.strartQueryPOI("天安门");
          },
        });
      }
    </script>
  </body>
</html>
